<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>
           {ms:include filename=headFile.htm/} 
</head>

<body>
	{ms:include filename=head.htm/}        
<div class="container mt20 clearfix">
    <div class="side-nav">
        <div class="user-info">
            <img src="images/user_avator.jpg" height="90" width="90" alt="" />
            <p>Hi，12345678900</p>
        </div>
        <dl>
            <dt>
                <i class="i1"></i>
                我的账户
            </dt>
            <dd><a href="center_settings.html">账户及密码</a></dd>
            <dd><a href="center_contacts.html">常用联系人</a></dd>
        </dl>
        <dl>
            <dt>
                <i class="i2"></i>
                订单管理
            </dt>
            <dd><a href="center_orders.html?type=1">已完成订单</a></dd>
            <dd><a href="center_orders.html?type=2">未完成订单</a></dd>
            <dd><a href="center_orders.html?type=3">可续保订单</a></dd>
        </dl>
        <dl>
            <dt>
                <i class="i3"></i>
                我的钱包
            </dt>
            <dd><a href="">我的积分</a></dd>
        </dl>
    </div>
    <div class="center-content">
        <div class="inner-content">
            <div class="center-title clearfix">
                <span>修改登陆密码</span>
            </div>
            <div class="psw-content" id="appCtrl" v-loack>
                <div style="margin:80px auto 40px;width:400px;min-height:300px">
                    <el-form 
                    label-position="right"
                    label-width="120px" 
                    ref="form"
                    :rules="rules"
                    :model="form">
                          <el-form-item label="原登陆密码：" prop="oldPsw">
                            　　<el-input v-model.trim="form.oldPsw" placeholder="请输入原登陆密码"></el-input>
                          </el-form-item>
                          <el-form-item label="新密码：" prop="psw">
                            　　<el-input v-model.trim="form.psw" placeholder="密码可由6-20位数字和英文字母组合"></el-input>
                          </el-form-item>
                          <el-form-item label="确认新密码：" prop="confirmPsw">
                            　　<el-input v-model.trim="form.confirmPsw" placeholder="请输入原登陆密码"></el-input>
                          </el-form-item>
                          <el-form-item label="　　">
                            　　<el-button @click="onSubmit" type="primary" style="width:100%">确定</el-button>
                          </el-form-item>
                    </el-form>            
                </div>
            </div>

        </div>
    </div>
</div>
</div>
   {ms:include filename=foot.htm/}   
    <script>
        var vm = new Vue({
            el: '#appCtrl',
            data: function(){
                var that = this;
                return {
                    rules:{
                        oldPsw:[{ required: true, message: '请输入原登陆密码', trigger: 'blur' }],
                        psw:[
                            { required: true, message: '请输入新密码', trigger: 'blur' },
                            { validator:function(rule, value, callback){
                                if(value.length<6||value.length>20){
                                    callback(new Error('密码必须有6~20个字符'));
                                }else{
                                    callback()
                                }
                            }, trigger: 'blur'}
                        ],
                        confirmPsw:[
                            { required: true, message: '请再次输入新密码', trigger: 'blur' },
                            { validator:function(rule, value, callback){
                                if(that.form.psw!=value){
                                    callback(new Error('输入的确认密码错误'));
                                }else{
                                    callback()
                                }
                            }, trigger: 'blur'}
                        ]
                    },
                    form:{
                        oldPsw:'',
                        psw:'',
                        confirmPsw:''
                    }
                }
            },

            methods:{
                onSubmit: function(){
                    var that = this;
                    this.$refs.form.validate(function(valid){
                        if(valid){
                            alert('提交表单')
                            that.$message.error('手机短信验证码错误');
                        }else{
                            return false;
                        }
                    })

                }
            }
        })
    </script>
</body>

</html>